<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Droppable Basic</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
    <style type="text/css">
        .title{
            margin-bottom:10px;
        }
        .dragitem{
            border:1px solid #ccc;
            width:50px;
            height:50px;
            margin-bottom:10px;
        }
        .targetarea{
            border:1px solid red;
            height:150px;
        }
        .proxy{
            border:1px solid #ccc;
            width:80px;
            background:#fafafa;
        }
    </style>

</head>
<body>
<h2>Basic Droppable</h2>
<p>Drag the boxed on left to the target area on right.</p>
<div style="margin:20px 0;"></div>
<div style="float:left;width:200px;margin-right:20px;">
    <div class="title">Source</div>
    <div>
        <div class="dragitem">Apple</div>
        <div class="dragitem">Peach</div>
        <div class="dragitem">Orange</div>
    </div>
</div>
<div style="float:left;width:200px;">
    <div class="title">Target</div>
    <div id="d"> </divid>
</div>
    <div style="clear:both"></div>
<script>
    $("#d").draggable({
        accept: '.dragitem',
        onDragEnter:function(e,source){
            $(this).html('enter');
        },
        onDragLeave: function(e,source){
            $(this).html('leave');
        },
        onDrop: function(e,source){
            $(this).html($(source).html() + ' dropped');
        }
    });
    $(function(){
        $('.dragitem').draggable({
            revert:true,
            deltaX:10,
            deltaY:10,
            proxy:function(source){
                var n = $('<div class="proxy"></div>');
                n.html($(source).html()).appendTo('body');
                return n;
            }
        });
    });
</script>

</body>
</html>